<template>
  <div class="api-docs">
    <el-container>
      <el-aside width="280px" class="menu-aside">
        <el-card class="menu-card" shadow="hover">
          <el-menu default-active="1-1" class="api-menu" @select="handleSelect">
            <!-- 介绍部分 -->
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>介绍</span>
              </template>
              <el-menu-item index="1-1">概述</el-menu-item>
              <el-menu-item index="1-2">快速开始</el-menu-item>
              <el-menu-item index="1-3">基础配置</el-menu-item>
            </el-sub-menu>

            <!-- API方法 -->
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Connection /></el-icon>
                <span>API方法</span>
              </template>
              <template v-for="category in SDKMenu" :key="category.sdkCategory">
                <el-sub-menu :index="category.sdkCategory">
                  <template #title>{{ category.categoryName }}</template>
                  <el-menu-item
                    v-for="method in category.methodsList"
                    :key="method._id"
                    :index="method._id"
                  >
                    {{ method.methodName }}
                  </el-menu-item>
                </el-sub-menu>
              </template>
            </el-sub-menu>

            <!-- 使用案例 -->
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>使用案例</span>
              </template>
              <el-menu-item index="3-1">基础示例</el-menu-item>
              <el-menu-item index="3-2">进阶示例</el-menu-item>
              <el-menu-item index="3-3">最佳实践</el-menu-item>
            </el-sub-menu>
          </el-menu>

          <!-- 新增SDK按钮 -->
          <div class="add-sdk-btn">
            <el-button type="primary" @click="showAddDialog">
              <el-icon><Plus /></el-icon>
              新增SDK
            </el-button>
          </div>
        </el-card>

        <!-- 新增SDK弹窗 -->
        <AddSdk
          ref="addSdkRef"
          :sdk-options="SDKMenu"
          @success="refreshSdkList"
        />
      </el-aside>

      <el-main class="content-main">
        <!-- 介绍页面动态组件 -->
        <component
          v-if="currentPath == IntroducePath"
          :is="currentIntroduceComponent"
        />

        <!-- SDK详情页面 -->
        <sdk-detail
          v-if="currentPath == SDKPath"
          :detail="sdkDetailData"
          :sdk-options="SDKMenu"
          @refresh-detail="handleRefreshDetail"
          @refresh-sdk-list="refreshSdkList"
        />
        
        <!-- 示例页面动态组件 -->
        <component
          v-if="currentPath == DemoPath"
          :is="currentDemoComponent"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, shallowRef, onMounted, defineAsyncComponent } from "vue";
import {
  Document,
  Connection,
  Collection,
  Plus,
} from "@element-plus/icons-vue";
import AddSdk from "./components/add.vue";
import sdkDetail from "./components/sdkDetail.vue";
// 动态导入介绍组件
const Overview = defineAsyncComponent(() =>
  import("./components/introduces/overview.vue")
);
const QuickStart = defineAsyncComponent(() =>
  import("./components/introduces/quickStart.vue")
);
const BasicConfig = defineAsyncComponent(() =>
  import("./components/introduces/basicConfig.vue")
);
// 动态导入示例组件
const BasicDemo = defineAsyncComponent(() =>
  import("./components/demos/basicDemo.vue")
);
const AdvancedDemo = defineAsyncComponent(() =>
  import("./components/demos/advancedDemo.vue")
);
const BestPractices = defineAsyncComponent(() =>
  import("./components/demos/bestPractices.vue")
);
import { getSdkList, getSdkDetail } from "@/api/modules/ueSdk";
const SDKMenu = ref([]);
onMounted(() => {
  getData();
});
const getData = () => {
  getSdkList().then((res) => {
    SDKMenu.value = res.data;
  });
};
const addSdkRef = ref(null);
const sdkDetailData = ref({});
const IntroducePath = "1";
const SDKPath = "2";
const DemoPath = "3";
const currentPath = ref(IntroducePath);

// 介绍页面组件映射
const introduceComponents = {
  "1-1": Overview,
  "1-2": QuickStart,
  "1-3": BasicConfig,
};
// 示例页面组件映射
const demoComponents = {
  "3-1": BasicDemo,
  "3-2": AdvancedDemo,
  "3-3": BestPractices,
};
const currentIntroduceComponent = shallowRef(Overview);
const currentDemoComponent = shallowRef(BasicDemo);
const handleSelect = (index, indexPath) => {
  currentPath.value = indexPath[0];
  if (indexPath[0] === IntroducePath) {
    // 切换到介绍页，根据选择的index显示对应组件
    if (introduceComponents[index]) {
      currentIntroduceComponent.value = introduceComponents[index];
    }
  } else if (indexPath[0] === SDKPath) {
    getSdkDetail({ id: index }).then((res) => {
      console.log(res);
      sdkDetailData.value = res.data;
    });
  } else if (indexPath[0] === DemoPath) {
    // 切换到demo页，根据选择的index显示对应组件
    if (demoComponents[index]) {
      currentDemoComponent.value = demoComponents[index];
    }
  }
};
// 刷新SDK列表
const refreshSdkList = () => {
  getData();
};

// 处理详情数据刷新
const handleRefreshDetail = (updatedData) => {
  if (updatedData) {
    // 如果有更新的数据，直接使用
    sdkDetailData.value = updatedData;
  } else if (sdkDetailData.value && sdkDetailData.value._id) {
    // 否则重新获取当前详情数据
    getSdkDetail({ id: sdkDetailData.value._id }).then((res) => {
      sdkDetailData.value = res.data;
    });
  }
};

// 显示新增SDK弹窗
const showAddDialog = () => {
  addSdkRef.value.dialogVisible = true;
};
</script>

<style scoped>
.api-docs {
  height: calc(100vh - 60px);
  width: 100%;
  display: flex;
  background-color: #fff;
  overflow: hidden;
}

.el-container {
  width: 100%;
  height: 100%;
}

.menu-aside {
  height: 100%;
  padding: 20px 0 20px 20px;
  overflow: hidden;
}

.menu-card {
  height: 100%;
  border-radius: 8px;
  padding: 20px 0px;
  box-sizing: border-box;
  overflow-y: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.api-menu {
  border-right: none;
}

.content-main {
  height: 100%;
  padding: 20px;
  overflow: hidden;
}

.menu-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.api-menu {
  flex: 1;
  border-right: none;
}

.add-sdk-btn {
  padding: 16px;
  border-top: 1px solid #e4e7ed;
  text-align: center;
}
</style>
